<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>MVVM 模式</title>
	<style>
		.first{
			height: 40px;
			width: 100%;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="first" data-bind="type : 'slider', data : demo1"></div>
	<div class="second" data-bind="type : 'slider', data : demo2">test</div>
	<div class="third" data-bind="type : 'progressbar', data : demo3"></div>
</body>
<script>
	(function(){
		var window = this || (0, eval)('this');
		var FONTSIZE = function (){
			return parseInt(document.body.currentStyle ? document.body.currentStyle['fontSize'] : getComputedStyle(document.body, false)['fontSize']);
		}();
		var VM = function(){
			var Method ={
				progressbar : function(dom, data){
					var progress = document.createElement('div'),
					param = data.data;
					progress.style.width = (param.positon || 100) + '%';
					dom.className += ' ui-progressbar';
					dom.appendChild(progress);
				},
				slider : function(dom, data){
					var bar = document.createElement('span'),
					progress = document.createElement('div'),
					totleText = null,
					progressText = null,
					param = data.data,
					width = dom.clientWidth,
					left = dom.offsetLeft,
					realWidth = (param.position || 100) * width / 100;
					dom.innerHTML = '';
					if(param.totle){
						text = document.createElement('b');
						progressText = document.createElement('em');
						text.innerHTML = param.totle;
						dom.appendChild(text);
						dom.appendChild(progressText);
					}
					setStyle(realWidth);
					dom.className += ' ui-slider';
					dom.appendChild(progress);
					dom.appendChild(bar);
					function setStyle(w){
						progress.style.width = w + 'px';
						bar.style.left = w - FONTSIZE / 2 + 'px';
						if(progressText){
							progressText.style.left = w - FONTSIZE / 2 * 2.4 + 'px';
							progressText.innerHTML = parseFloat(w / width * 100).toFixed(2) + '%';
						};
					}
					bar.onmousedown = function(){
						document.onmousemove = function(even){
							var e = event || window.event;
							var w = e.clientX - left;
							setStyle(w < width ? (w > 0 ? w : 0) :width);
						}
						document.onselectstart = function(){
							return false;
						}
					}
					document.onmouseup = function(){
						document.onmousemove = null;
						document.onselectstart = null;
					}
				}
			}
			function getBindData(dom){
				var data = dom.getAttribute('data-bind');
				return !!data && (new Function("return ({"+data+"})"))();
			}
		return function(){
			var doms = document.body.getElementsByTagName('*'),
			ctx = null;
			for(var i = 0; i < doms.length; i++){
				ctx = getBindData(doms[i]);
				ctx.type && Method[ctx.type] && Method[ctx.type](doms[i], ctx);
			}
		}
		}();
		window.VM = VM;
	})();

	var demo1 = {
		position : 60,
		totle : 200
	},
	demo2 = {
		position : 20
	},
	demo3 = {position : 50};

	window.onload = function(){
		VM();
	}
</script>
</html>